<template>
  <div id="s">
    <!--  基本信息-->
    <el-form :model="dispatchForm" style="text-align: left" label-width="120px">

      <div>
        <div class="myBorder">
          <el-row style="margin-bottom: 20px">
            <el-col :span="24"><div class="grid-content bg-purple-light">
              <div class="separate" >&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-tickets"></i>&nbsp;&nbsp;基本信息</div>
            </div></el-col>
          </el-row>
          <div style="text-align: right">
            <el-form-item>
              <el-button type="info" @click="cancel" plain>返回</el-button>&nbsp;&nbsp;&nbsp;
            </el-form-item>
          </div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="调度单号">
                <el-input v-model="dispatchForm.ticketId" readonly style="width: 300px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人员">
                <el-input v-model="dispatchForm.createId" readonly style="width: 300px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间">
                <el-input v-model="dispatchForm.createTime" readonly style="width: 300px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="运输类型">
                <el-input v-model="dispatchForm.type" readonly style="width: 300px;"></el-input>
              </el-form-item>
              <el-form-item label="车牌号">
                <el-input v-model="dispatchForm.carNumber" readonly style="width: 300px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发货时间">
                <el-input v-model="dispatchForm.startTime" readonly style="width: 300px;"></el-input>
              </el-form-item>
              <el-form-item label="预计到达时间">
                <el-input v-model="dispatchForm.endTime" readonly style="width: 300px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="起点" prop="consignorAddress">
                <el-input v-model="dispatchForm.startAreaName" readonly style="width: 300px;"></el-input>
              </el-form-item>
              <el-form-item label="终点" prop="consigneeAddress">
                <el-input v-model="dispatchForm.endAreaName" readonly style="width: 300px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="myBorder ">
        <el-row style="margin-bottom: 20px">
          <el-col :span="24"><div class="grid-content bg-purple-light">
            <div class="separate" >&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-tickets"></i>&nbsp;&nbsp;车辆信息</div>
          </div></el-col>
        </el-row>
        <el-descriptions class="margin-top" :column="3" border>
          <el-descriptions-item>
            <template slot="label">
              车辆长度(m)
            </template>
            {{ this.car.length }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              车辆宽度(m)
            </template>
            {{ this.car.width }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              车辆高度(m)
            </template>
            {{ this.car.height }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              车辆类型
            </template>
            {{ this.car.type }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              载重量(吨)
            </template>
            {{ this.car.carLoad }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              车辆容积(m³)
            </template>
            {{ this.car.volume }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              车辆当前位置
            </template>
            {{ this.car.location }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              车牌号
            </template>
            {{ this.car.number }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              司机姓名
            </template>
            {{ this.driver.driverName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              司机性别
            </template>
            {{ this.driver.sex }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              联系方式
            </template>
            {{ this.driver.driverTel }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              身份证号
            </template>
            {{ this.driver.driverId }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="myBorder ">
        <el-row style="margin-bottom: 20px">
          <el-col :span="24"><div class="grid-content bg-purple-light">
            <div class="separate" >&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-tickets"></i>&nbsp;&nbsp;订单信息</div>
          </div></el-col>
        </el-row>
        <div>
          <el-form :inline="true" style="text-align: right">
            <el-form-item>
              <el-form-item label="总重量(kg)" prop="weight">
                <el-input readonly v-model="weight"></el-input>
              </el-form-item>
              <el-form-item label="总体积(m³)" prop="weight">
                <el-input readonly v-model="volume"></el-input>
              </el-form-item>
            </el-form-item>
          </el-form>
        </div>
        <div>
<!--          订单数据表格-->
          <el-table :data="dispatchForm.orderFormList" stripe style="width: 100%"
                    :header-cell-style="{background:'#f7f7f7', color:'#666666'}">
            <el-table-column
              label="序号"
              width="80"
              type="index"
              fixed>
            </el-table-column>
            <el-table-column
              prop="orderId"
              label="委托单编号"
              sortable
              width="180">
            </el-table-column>
            <el-table-column
              prop="customer.customerNameShort"
              label="委托客户"
              width="180">
            </el-table-column>
            <el-table-column
              prop="transportType"
              label="订单类型"
              width="100">
            </el-table-column>
            <el-table-column
              prop="weight"
              label="重量(kg)"
              width="100">
            </el-table-column>
            <el-table-column
              prop="volume"
              label="体积(m³)"
              width="100">
            </el-table-column>
            <el-table-column
              prop="consignorName"
              label="发货人"
              width="100">
            </el-table-column>
            <el-table-column
              prop="consignorCity.mergerName"
              label="发货地址"
              width="180">
            </el-table-column>
            <el-table-column
              prop="consigneeName"
              label="收货人"
              width="100">
            </el-table-column>
            <el-table-column
              prop="consigneeCity.mergerName"
              label="收货地址"
              width="180">
            </el-table-column>
            <el-table-column
              prop="pickupDate"
              label="取货日期"
              sortable
              width="180">
            </el-table-column>
            <el-table-column
              prop="currentStatus"
              label="当前状态"
              width="100">
            </el-table-column>
            <el-table-column
              label="操作"
              width="180">
              <template v-slot="scope">
                <el-button slot="reference" @click="check(scope.row)" type="text" size="small"  >详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="myBorder ">
        <el-row style="margin-bottom: 20px">
          <el-col :span="24"><div class="grid-content bg-purple-light">
            <div class="separate" >&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-tickets"></i>&nbsp;&nbsp;路线信息</div>
          </div></el-col>
        </el-row>
        <div style="text-align: right">
        </div>
        <div>
<!--          路线数据表格-->
          <el-table :data="dispatchForm.dispatchRouteList" stripe style="width: 100%"
                    :header-cell-style="{background:'#f7f7f7', color:'#666666'}">
            <el-table-column
              label="序号"
              width="80"
              type="index"
              fixed>
            </el-table-column>
            <el-table-column
              label="起点"
              prop="lastName"

            >
            </el-table-column>
            <el-table-column
              label="终点"
              prop="areaName"

            >
            </el-table-column>
            <el-table-column
              label="到达时间"
              prop="ariveTime"
            >
            </el-table-column>
            <el-table-column
              label="实际到达时间"
              prop="actualAriveTime"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-form>
    <!--    回单信息-->
    <div class="myBorder" v-if="showReturn">
      <el-row style="margin-bottom: 20px">
        <el-col :span="24"><div class="grid-content bg-purple-light">
          <div class="separate" >&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-tickets"></i>&nbsp;&nbsp;回单信息</div>
        </div></el-col>
      </el-row>
      <el-row type="flex" class="row-bg" justify="space-around" >
        <el-col :span="8" v-for="(ele,index) in src" :key="index" >
          <div class="grid-content bg-purple-light">
            <el-image :src="ele"
                      style="width: 250px; height: 200px"
                      :preview-src-list="src"
                      :fit="'cover'">
            </el-image>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="8" v-for="(ele,index) in orderIds" :key="index">
          <div class="grid-content bg-purple-light" >
            {{ ele }}
          </div>
        </el-col>
      </el-row>
    </div>
    <!--    异常信息-->
    <div class="myBorder ">
      <el-row style="margin-bottom: 20px">
        <el-col :span="24"><div class="grid-content bg-purple-light">
          <div class="separate" >&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-tickets"></i>&nbsp;&nbsp;异常信息</div>
        </div></el-col>
      </el-row>
      <div>
        <el-table :data="abnormalRecordList" stripe style="width: 100%">
          <el-table-column
            label="序号"
            width="80"
            type="index">
          </el-table-column>
          <el-table-column
            prop="aid"
            label="异常单号">
          </el-table-column>
          <el-table-column
            prop="dispatchTicket.carNumber"
            label="车牌号">
          </el-table-column>
          <el-table-column
            prop="dispatchTicket.carInfo.anotherOne"
            label="司机">
          </el-table-column>
          <el-table-column
            prop="abnormalType"
            label="异常类型">
          </el-table-column>
          <el-table-column
            prop="abnormalTime"
            label="异常时间">
          </el-table-column>
          <el-table-column
            prop="abnormalAddress"
            label="异常地点">
          </el-table-column>
          <el-table-column
            prop="dispatchAcceptResult.acceptResult"
            label="受理结果">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "DispatchDetail",
  data() {
    return {
      //调度单查询条件
      dispatchForm: {
        type: '整车',
        orderFormList: [],
        dispatchRouteList: [],
        carInfo: {}
      },
      //表格数组
      tableData: [],
      //运输类型
      typeList: ['整车', '散货'],
      //城市列表
      baseCityList: [],
      //选中车牌号车辆信息
      car: {},
      //选中车牌号司机信息
      driver: {},
      //订单弹窗控制
      showOrder: false,
      //调度单总重量
      weight: 0,
      //调度单总体积
      volume: 0,
      //路线表单
      routeForm: {},
      //回单图片
      photos: [],
      //回单订单号
      orderIds: [],
      //异常列表
      abnormalRecordList: [],
      //显示控制显示回单信息
      showReturn:false
    }
  },
  methods: {
    //不丢失精度加法
    accAdd(arg1, arg2) {
      let r1, r2, m, n
      try {
        r1 = arg1.toString().split('.')[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split('.')[1].length;
      } catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      n = r1 >= r2 ? r1 : r2
      return +((arg1 * m + arg2 * m) / m).toFixed(n)
    },
    //不丢失精度减法
    accSub(arg1, arg2) {
      let r1, r2, m, n
      try {
        r1 = arg1.toString().split('.')[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split('.')[1].length;
      } catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      n = r1 >= r2 ? r1 : r2
      return +((arg1 * m - arg2 * m) / m).toFixed(n)
    },
    //根据id获取车辆信息和司机信息
    getDriverAndCar(val) {
      let carId = val.id
      this.$axios({
        url: 'car/getDriverAndCar/' + carId,
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          this.car = res.data.object.car;
          this.driver = res.data.object.driver;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //返回上级界面
    cancel() {
      this.$router.back();
    },
    iniDispatchForm() {
      this.dispatchForm = this.$store.state.currentDispatchTicket;
    },
    // 查看订单
    check(row) {
      this.$store.commit('orderOperationType', 'checkOrder')
      this.$store.commit('currentOrder', row)
      this.$router.push('OrderOperate')
    },
    //返回回单图片信息
    getOrderImg(val) {
      this.$axios({
        url: 'order/form/getOrderImg/',
        method: 'post',
        data: val
      }).then(res => {
        if (res.data.success) {
          this.photos.push(res.data.object);
          this.orderIds.push(val.orderId)
          this.showReturn=true
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //初始化异常表单
    initAbnormalRecordList() {
      this.$axios({
        url: 'dispatch/abnormal/listByDispatch/' + this.$store.state.currentDispatchTicket.ticketId,
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          this.abnormalRecordList = res.data.object;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    }
  },
  created() {
    this.iniDispatchForm();
    this.initAbnormalRecordList();
    if (this.$store.state.currentDispatchTicket.orderFormList !== undefined && this.$store.state.currentDispatchTicket.orderFormList.length > 0) {
      for (let form of this.$store.state.currentDispatchTicket.orderFormList) {
        this.weight = this.accAdd(this.weight, form.weight)
        this.volume = this.accAdd(this.volume, form.volume)
        if (form.finishImg != undefined && form.finishImg != '') {
          this.getOrderImg(form);
        }
      }
    }
  },
  mounted() {
    let car = this.dispatchForm.carInfo;

    if (car !== undefined) {
      this.getDriverAndCar(car)
    }
  },
  computed: {
    src() {
      const src = []
      for (const ele of this.photos) {
        src.push('data:image/jpeg;base64,' + ele)
      }
      return src;
    }
  }
}
</script>

<style scoped>
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
  text-align: center;
}
#s{
  width:90%;
  margin:10px auto;
  background-color: #ffffff;
  box-shadow: 10px 10px 5px #c4c6c7;
  border-radius: 5px
}
.el-button--info:hover {
  background: #209e91;
  border-color: #209e91;
  color: #FFF;
}
.myBorder {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  margin: 20px 0px;
}
.separate {
  width: 100%;height: 50px;background: #339999;border-color: #339999;text-align: left;line-height:50px;color: #FFFFFF;
}
</style>
